<template>
	<view class="container">
		<view class="box">
			<input type="text" class="phone" v-model="phone" placeholder="输入新的手机号"/>
			<button class="btn" @tap="Obtain" :disabled="disabled">{{btnTitle}}</button>
			<input type="text" class="yanzhen" v-model="captcha" placeholder="输入验证码"/>
		</view>
		<button class="btn" @tap="tijiao">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				disabled: false,
				btnTitle: '获取验证码',
				captcha:''
			};
		},
		onLoad(e) {
			this.token=e.token
		},
		methods:{
			tijiao(){
				if(!this.phone){
					uni.showToast({
						title: '手机号不能为空',
						icon:'none',
						duration:2000
					});
				}else if(!this.captcha){
					uni.showToast({
						title: '验证码不能为空',
						icon:'none',
						duration:2000
					});
				}else{
					uni.showLoading({
						title: '加载中',
						mask: false
					});
					uni.request({
						url: this.webUrl+'/driver/my/phone',
						method: 'PUT',
						header:{
							token:this.token
						},
						data: {
							phone:this.phone,
							captcha:this.captcha
						},
						success: res => {
							console.log(res)
							uni.hideLoading()
							if(res.data.code==0){
								uni.setStorage({
									key: 'driver',
									data: res.data.data,
									success: function() {
									}
								});
								uni.showToast({
									title: '保存成功',
									icon:'none',
									duration:2000
								});
								setTimeout(()=>{
									uni.switchTab({
									    url: '../../myInfo'
									});
								},2000)
							}else if(res.data.code==3){
								uni.showToast({
									title: res.data.msg,
									icon:'none',
									duration:2000
								});
							}else{
								uni.showToast({
									title: '网络错误',
									icon:'none',
									duration:2000
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			Obtain() {
				//获取验证码
				if (!this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.request({              //请求验证码
						url: this.webUrl + '/index/index/sendsms',
						method: 'POST',
						data: {
							phone: this.phone
						},
						success: res => {
							// console.log(res)
							if (res.data.code == 1) {
								uni.showToast({
									title: '手机号不能为空',
									icon: 'none',
									duration: 2000
								});
							} else if (res.data.code == 3) {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
							} else if(res.data.code==0){
								//倒计时
								uni.showToast({
									title: '短信发送成功',
									icon: 'none',
									duration: 2000
								});
								let time = 60;
								let timer = setInterval(() => {
									if (time == 0) {
										clearInterval(timer);
										this.disabled = false;
										this.btnTitle = "获取验证码";
									} else {
										this.btnTitle = time + '秒后重试';
										this.disabled = true;
										time--
									}
								}, 1000)
							}else{
								uni.showToast({
									title: '网络错误，请稍后重试',
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: #f2f2f2;
		.box{
			margin: 20upx 0upx;
			background: #FFFFFF;
			overflow: hidden;
			input{
				margin: 20upx 30upx;
				border: 2upx solid #999999;
				border-radius: 10upx;
				padding: 30upx 20upx;
			}
			button{
				margin: 10upx auto;
				background: #fe5621;
				width: 300upx;
				color: #FFFFFF;
			}
		}
		.btn{
			margin: 300upx auto 0;
			background: #fe5621;
			width: 300upx;
			color: #FFFFFF;
		}
	}
</style>
